<template>
  <div class="banner" :style="{width:bannerwidth}">
    <a-carousel autoplay>
        <div v-for='(item,index) in arrItem' :key="item+index">
            <img :src="item.image_url">
        </div>
    </a-carousel>
    <Main></Main>
  </div>
</template>

<script>
import Swiper from 'swiper/swiper-bundle.js' 
import '../../../node_modules/swiper/swiper-bundle.css';
import Main from '../main'
import {getbannerData} from '../../api'
export default {
    components:{
        Main
    },
    data() {
        return {
            arrItem:[{image_url:''},{image_url:''},{image_url:''}],
        }
    },
    methods:{
        banner(){
            var mySwiper = new Swiper ('.swiper-container', {
                autoplay:true,
                
                // 如果需要分页器
                pagination: {
                el: '.swiper-pagination',
                },
                
                // 如果需要前进后退按钮
                navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                }
            })      
        }
    },
    mounted(){
        this.banner()
        getbannerData().then(res=>{
            this.arrItem = res.results
        })
    },
    computed:{
        bannerwidth: ()=>{
            if(window.innerWidth>=1200){
                return 1200+'px'
            }else{
                return '100%'
            }
        }
    }
}
</script>

<style lang='less'>
.banner{
    margin: 0 auto;
        img{
            width: 100%;
            height: 43vh;
        }
}
</style>